<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0;
            box-sizing: border-box;
        }
        body {
            height: 8000px;
        }
        .menu {
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-10%);
        }
        .item {
            width: 130px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
        .active {
            background-color: #f80505;
            color: white;
        }

        .content {
            width: 700px;
            margin: 200px auto;
        }
        .neirong {
            width: 700px;
            height: 500px;
        }
        .content1 {
            background-color: yellow;
        }
        .content2 {
            background-color: yellowgreen;
        }
        .content3 {
            background-color: green;
        }
        .content4 {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item active" data-id="1">男装/女装</div>
        <div class="item" data-id="2">儿童服装/游乐园</div>
        <div class="item" data-id="3">电子产品</div>
        <div class="item" data-id="4">电影/美食</div>
    </div>
    <div class="content">
        <div class="neirong content1" data-id="1">男装/女装</div>
        <div class="neirong content2" data-id="2">儿童服装/游乐园</div>
        <div class="neirong content3" data-id="3">电子产品</div>
        <div class="neirong content4" data-id="4">电影/美食</div>
    </div>
    <script>
        function findIndex(scrollTop) {
            const divList = document.querySelectorAll('.neirong')
            for (let index = 0; index < divList.length; index++) {
                if (index == divList.length - 1){
                    return index
                } else if (index === 0 && scrollTop <= divList[index].offsetTop){
                    return index
                }else if (scrollTop >= divList[index].offsetTop && scrollTop < divList[index + 1].offsetTop) {
                    return index
                }
                
            }
            return divList.length - 1
        }

        document.querySelector('.menu').addEventListener('click', function(e) {
            document.querySelector(".active").classList.remove('active')
            e.target.classList.add('active')
            const dataId = e.target.dataset.id
            const div = document.querySelector(`.content${dataId}`)
            const offsetTop = div.offsetTop
            document.documentElement.scrollTop = offsetTop
        })
        window.addEventListener('scroll', function() {
            const scrollTop = document.documentElement.scrollTop
            const index = findIndex(scrollTop)
            document.querySelector(".active").classList.remove('active')
            document.querySelector(`[data-id="${index + 1}"]`).classList.add('active')
        })
    </script>
</body>
</html>